﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>自定义分页表格</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    
    
</head>
<body>
    <h1>自定义分页表格</h1>      

    <div class="mini-toolbar" style="padding:0px;border-bottom:0;">
        <table style="width:100%;">
            <tr>
                <td style="width:100%;">                
                    <a class="mini-button" iconCls="icon-addfolder" plain="true">增加</a>
                    <a class="mini-button" iconCls="icon-edit" plain="true">修改</a>
                    <a class="mini-button" iconCls="icon-remove" plain="true">删除</a>
                    <span class="separator"></span>
                    <a class="mini-button" iconCls="icon-reload" plain="true">刷新</a>
                </td>
                <td style="white-space:nowrap;">                    
                    <div id="pager1" class="mini-pager" style="width:380px;"
                        sizeList="[5,10,20,100]">        
                    </div> 
                </td>  
            </tr>
        </table>
    </div>
    <div id="datagrid1" class="mini-datagrid" style="width:100%;height:300px;" 
        url="../data/AjaxService.jsp?method=SearchEmployees"  idField="id" allowResize="true"
        showPager="false" pageSize="20" pager="#pager1"
    >
        <div property="columns">
            <div type="indexcolumn" ></div>
            <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>    
            <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>                            
            <div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性别</div>
            <div field="salary" width="100" allowSort="true">薪资</div>                                    
            <div field="age" width="100" allowSort="true">年龄</div>
            <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>                
        </div>
    </div>   
   
    <script type="text/javascript">
        mini.parse();

        var grid = mini.get("datagrid1");

        grid.load();
        

        ///////////////////////////////////////////////////////
        var Genders = [{ id: 1, text: '男' }, { id: 2, text: '女'}];
        function onGenderRenderer(e) {
            for (var i = 0, l = Genders.length; i < l; i++) {
                var g = Genders[i];
                if (g.id == e.value) return g.text;
            }
            return "";
        }    

    </script>

    <div class="description">
        <h3>Description</h3>
        <ol>
            <li>隐藏默认分页：showPager="false"</li>
            <li>创建一个Pager对象，摆放在任意位置</li>
            <li>设置新分页：pager="#pager1"</li>
        </ol>
    </div>


  

</body>
</html>